/*******************************
MAIN STYLESHEET
    Theme Name: Quarca - Bootstrap Admin Template
    Theme Demo: http://cazylabs.com/themes-demo/quarca
    Version: 1.1
    Author: Shahen Algoo
    Author Website: http://www.cazylabs.com/

TABLE OF CONTENTS
    1.0 - PAGE PRELOADER
    2.0 - GLOBALS
    3.0 - HEADER
    4.0 - SIDEBAR
    5.0 - LEFT SIDEBAR
    6.0 - RIGHT SIDEBAR
    7.0 - CHAT/MESSENGER
    8.0 - TASKS/TO-DO LIST
    9.0 - INBOX/SENT SIDEBAR
    10.0 - NOTIFICATIONS SIDEBAR
    11.0 - MAIN
    12.0 - GRID
    13.0 - PANES
    14.0 - FOOTER
    15.0 - DRAG & DROP
    16.0 - DASHBOARD WIDGETS
    17.0 - PAGE - MEMBERSHIP
    18.0 - LOGGING OUT PAGE
    19.0 - PAGE - PROFILE
    20.0 - THEME OPTIONS
    * UI Elements CSS can be found in assets/css/ui.css
*******************************/

/*******************************
1.0 - PAGE PRELOADER
*******************************/
    body{
        margin: 0px;
        padding: 0px;
    }
    #preloader {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
        background: #6C7A89;
    }
    
    #status {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 24px;
        margin: -12px 0 0 -12px;
        background-image:url(../img/core/status.gif);
        background-size: 24px;
        background-repeat: no-repeat;
        background-position: center;
    }

/*******************************
2.0 - GLOBALS
*******************************/
    body {
        line-height: 160%;
        font-family: 'Open Sans', sans-serif;
        font-weight: 300;
        padding: 0 !important;
    }
    
/* ----- HEADINGS ----- */
    h1, h2, h3, h4, h5, h6 {
        margin: 0 0 30px;
        font-weight: 300;
    }
    
    h1 {font-size: 46px;}
    h2 {font-size: 40px;}
    h3 {font-size: 36px;}
    h4 {font-size: 30px;}
    h5 {font-size: 26px;}
    h6 {font-size: 20px;}

/* ----- TYPOGRAPHY ----- */
    p {
        font-weight: 400;
        color: #666;
    }
    
    p.lead {
        font-weight: 400;
        font-size: 16px;
    }
    
    pre {
        overflow-x: auto;
        border: none;
        border-radius: 0;
        padding: 10px;
        word-wrap: normal;
        background: #333;
    }
    
/* ----- FIT TEXT ----- */
    .fit-text {
        display: block;
        width: 100%;
    }

/*******************************
3.0 - HEADER
*******************************/
    .header {
        z-index: 999;
        top: 0;
        width: 100%;
        height: 65px;
    }
    
    .navbar-header {
        float: left;
        width: 0px;
        height: 50px;
    }
    
/* ----- LOGO ----- */
    .logo {
        display: block;
        width: 270px;
        height: 65px;
        line-height: 60px;
        padding: 0 10px;
    }
    
/* ----- SIDEBAR SWITCH ----- */
    .sidebar-switch {
        cursor: pointer;
        display: block;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 14px;
        -webkit-transition: all 0.3s ease;
        -moz-transition:    all 0.3s ease;
        -ms-transition:     all 0.3s ease;
        -o-transition:      all 0.3s ease;
        transition:         all 0.3s ease;
    }
    
    .sidebar-switch .icon:before {
        content: "\f03b";
    }
    
    .sidebar-toggle .sidebar-switch .icon:before,
    .sidebar-toggle-sm .sidebar-switch .icon:before {
        content: "\f03c";
    }
    
/* ----- HEADER ICONS/BUTTONS ----- */
    .header-navbar .navbar-toggle {
        cursor: pointer;
        float: left;
        width: 10%;
        height: 65px;
        line-height: 50px;
        margin: 0;
        padding: 0;
        text-align: center;
        font-size: 14px;
        border: none;
        border-radius: 0;
    }

    /*Search*/
        .header-navbar .navbar-form {
            margin: 10px 0;
            padding: 0 10px;
            border: none;
            box-shadow: none;
        }
        
        .header-navbar .navbar-form .form-control {
            width: 240px;
        }

    /*Icons Navigation*/
        .header-navbar .navbar-nav > li > a {
            min-width: 95px;
            padding: 12px 10px;
            border-left: 1px solid;
            text-align: center;
        }
        
        .header-navbar .navbar-nav > li > a > span {
            display: block;
            font-weight: 400;
            font-size: 12px;
        }
        
        .header-navbar .navbar-nav > li > a:hover,
        .header-navbar .navbar-nav > li > a:focus {
            background: none;
            color: #fff;
        }

        .header-navbar .navbar-nav > li.turn-off > a:hover,
        .header-navbar .navbar-nav > li.turn-off > a:focus {
            background: none;
            color: white;
        }
        
    /*Navbar Collapse*/
        .header-navbar .navbar-collapse {
            border: none;
            box-shadow: none;
        }
        
/* ----- HEADER RESPONSIVE ----- */
    @media (max-width: 1024px) {
    /*Search*/
        .header-navbar .navbar-form .form-control {
            width: auto;
        }
    }/*End*/
    
    @media (max-width: 992px) and (min-width: 768px) {
    /*Icons Navigation*/
        .header-navbar .navbar-nav > li > a {
            min-width: 70px;
        }
        
        .header-navbar .navbar-nav > li > a > span {
            font-size: 10px;
        }
    }/*End*/
    
    @media (max-width: 830px) and (min-width: 768px) {
    /*Search*/
        .header-navbar .navbar-form .form-control {
            width: 90px;
        }
    }/*End*/
    
    @media (max-width: 767px) {
    /*Header*/
        .navbar-header {
            width: 100%;
        }
        
        .logo {
            width: 80%;
            text-align: center;
        }
        
    /*Sidebar Switch*/
        .sidebar-switch {
            width: 10%;
        }
        
    /*Search*/
        .header-navbar .navbar-form {
            margin: 15px 0;
            padding: 0;
        }
    
        .header-navbar .navbar-form .form-control {
            width: 100%;
        }
        
    /*Icons Navigation*/
        .header-navbar .navbar-nav {
            margin: 15px 0;
            text-align: center;
        }
        
        .header-navbar .navbar-nav > li {
            display: inline-block;
        }
        
        .header-navbar .navbar-nav > li:last-child > a {
            border-right: 1px solid;
        }
    }/*End*/
    
    @media (max-width: 460px) {
        /*Icons Navigation*/
        .header-navbar .navbar-nav > li > a {
            min-width: 60px;
            padding: 5px 0px;
        }
        
        .header-navbar .navbar-nav > li > a > span {
            font-size: 10px;
        }
    }/*End*/
        
/*******************************
4.0 - SIDEBAR
*******************************/
    .sidebar-content {
        position: relative;
        left: 0;
        width: 320px;
    }
    
    .sidebar-content h4 {
        cursor: default;
        margin: 0;
        padding: 10px 15px;
        font-weight: 400;
        font-size: 16px;
        text-transform: uppercase;
    }
    
/* ----- SIDEBAR/MESSENGER SCROLLPANE ----- */
    .sidebar-container {
        width: 320px;
        padding-bottom: 50px;
    }
    
    .sidebar-scrollpane,
    .chat-scrollpane {
        width: 100%;
        height: 100%;
        overflow: auto;
        outline: none;
    }
    
    .sidebar-container .jspPane,
    .chat-scrollpane .jspPane {
        position: absolute;
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    .sidebar-container .jspVerticalBar,
    .chat-scrollpane .jspVerticalBar {
        display: none;
        position: absolute;
        top: 0;
        right: 3px;
        width: 3px;
        height: 100%;
    }
    
    .sidebar-container:hover .jspVerticalBar,
    .chat-scrollpane:hover .jspVerticalBar {
        display: block;
    }
    
    .sidebar-container .jspContainer,
    .chat-scrollpane .jspContainer {
        width: 100% !important;
        overflow: hidden;
        position: relative;
    }
    
    .sidebar-container .scroll-pane,
    .chat-scrollpane .scroll-pane{
        width: 100% !important;
        height: 100%;
    }
    
    .sidebar-container .jspTrack,
    .chat-scrollpane .jspTrack {
        position: relative;
    }
    
    .sidebar-container .jspDrag,
    .chat-scrollpane .jspDrag {
        position: relative;
        top: 0;
        left: 0;
        cursor: pointer;
        -moz-opacity: 0.30;
        -khtml-opacity: 0.30;
        opacity: 0.30;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=30;);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
        filter:alpha(opacity=30);
    }
    
/* ----- SIDEBAR-PROFILE ----- */
    .sidebar-profile {
        width: 100%;
        height: 100px;
        padding: 15px;
        background-image: url('');
        -webkit-transition: all 0.3s ease;
        -moz-transition:    all 0.3s ease;
        -ms-transition:     all 0.3s ease;
        -o-transition:      all 0.3s ease;
        transition:         all 0.3s ease;
    }
    
    .profile-picture {
        width: 70px;
        height: 70px;
        margin-right: 10px;
    }
    
    .profile-picture img {
        width: 100%;
        border: 2px solid;
    }
    
    .sidebar-profile h6 {
        margin: 10px 0 0;
        font-size: 12px;
        font-weight: 600;
    }
    
    .sidebar-profile h5 {
        margin: 0;
        font-size: 16px;
        font-weight: 400;
    }
    
    /*Change Status*/
        .sidebar-profile .btn-group a {
            cursor: pointer;
            text-decoration: none !important;
            font-weight: 400;
            font-size: 13px;
        }
    
    /*Text*/
        .sidebar-profile .busy,
        .sidebar-profile .away,
        .sidebar-profile .offline {
            display: none;
        }
        
        .sidebar-profile.busy .online,
        .sidebar-profile.away .online,
        .sidebar-profile.offline .online {
            display: none;
        }
        
        .sidebar-profile.busy .busy,
        .sidebar-profile.away .away,
        .sidebar-profile.offline .offline {
            display: inline-block;
        }
    
    /*Chat Labels/Status*/
        .label-status {
            display: inline-block;
            width: 10px;
            height: 10px;
            padding: 0;
            -webkit-border-radius: 5px;
            -moz-border-radius:    5px;
            border-radius:         5px;
        }
        
/* ----- SIDEBAR TABS ----- */
    .sidebar .tab-nav {
        position: relative;
        z-index: 10;
        height: 43px;
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    .sidebar .tab-nav > li {
        float: left;
        width: 33.3%;
        border-bottom: 1px solid;
    }
    
    .sidebar .tab-nav > li:last-child {
        border-right: none;
    }
    
    .sidebar .tab-nav > li.active {
        background: none;
        border-bottom: 1px solid;
    }
    
    .sidebar .tab-nav > li > a {
        position: relative;
        display: block;
        text-align: center;
        padding: 10px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    .sidebar .tab-nav > li.active > a:hover {
        background: none;
    }
    
    /*Badge*/
        .sidebar .tab-nav > li > a .badge {
            position: absolute;
            top: 4px;
            right: 37px;
            padding: 3px 5px;
            font-weight: 400;
            font-size: 10px;
        }
    
    /*Tab Content*/
        .sidebar .tab-content {
            border: none;
            padding: 0;
            background: none;
        }
    
/* ----- SIDEBAR NAVIGATION ----- */
    .sidebar-nav {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    .sidebar-nav > li {
        border-bottom: 1px solid;
    }
    
    .sidebar-nav > li:last-child {
        border-bottom: none;
    }
    
    .sidebar-nav .fa-fw {
        width: 20px;
        margin-right: 5px;
        vertical-align: -5%;
    }
    
    .sidebar-nav > li > a,
    .sidebar-nav ul > li > a {
        display: block;
        padding: 10px;
        text-decoration: none !important;
        font-weight: 400;
        font-size: 12px;
    }
    
    /*More*/
        .plus-times {
            float: right;
            position: relative;
            top: 5px;
            right: 2px;
            -webkit-transition: all 0.3s ease;
            -moz-transition:    all 0.3s ease;
            -ms-transition:     all 0.3s ease;
            -o-transition:      all 0.3s ease;
            transition:         all 0.3s ease;
            -webkit-backface-visibility: hidden;
        }
        
        .fa.plus-times:before {
            content: "\f067";
        }
        
        .active > a > .fa.plus-times {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
            -webkit-transform: rotate(45deg);
            -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
            -o-transform: rotate(45deg);
            transform: rotate(45deg);
        }
    
    /*Sub Menus*/
        .sidebar-nav ul {
            padding: 0;
            list-style-type: none;
        }
        
        .sidebar-nav ul > li > a {
            display: block;
            padding: 10px 10px 10px 38px;
            text-decoration: none !important;
        }
        
        .sidebar-nav ul ul {
            margin: 0;
        }
        
        .sidebar-nav ul ul > li > a {
            padding: 10px 10px 10px 55px;
        }
        
/*******************************
5.0 - LEFT SIDEBAR
*******************************/
    .sidebar {
        top: 50px;
        width: 320px;
        height: 100%;
    }

    .main {
        z-index: 11;
        -webkit-transition: margin-left 0.3s ease, left 0.3s ease;
        -moz-transition:    margin-left 0.3s ease, left 0.3s ease;
        -ms-transition:     margin-left 0.3s ease, left 0.3s ease;
        -o-transition:      margin-left 0.3s ease, left 0.3s ease;
        transition:         margin-left 0.3s ease, left 0.3s ease;
    }
    
/* ----- SIDEBAR TOGGLE ----- */
    .sidebar-toggle .main {
        margin-left: 0;
    }
    
    @media (max-width: 1170px) {
        .wrapper {
            overflow: hidden;
        }
        
        .main {
            margin-left: auto;
            left: 0;
        }
        
        .sidebar-toggle-sm .main {            
            left: 320px;
        }
    }/*End*/
    
    @media (min-width: 1170px) and (max-width: 1190px) {
        .sidebar-toggle-sm .main {            
            margin-left: 0;
        }
    }/*End*/
    
/*******************************
6.0 - RIGHT SIDEBAR
*******************************/
    .right-sidebar .sidebar {
        right: 0;
    }

    .right-sidebar .main {
        margin-left: 0;
        margin-right: 320px;
        -webkit-transition: margin-right 0.3s ease, right 0.3s ease;
        -moz-transition:    margin-right 0.3s ease, right 0.3s ease;
        -ms-transition:     margin-right 0.3s ease, right 0.3s ease;
        -o-transition:      margin-right 0.3s ease, right 0.3s ease;
        transition:         margin-right 0.3s ease, right 0.3s ease;
    }
    
/* ----- HEADER ----- */
    @media (min-width: 768px) {
        .right-sidebar .navbar-header {
            float: right;
        }
        
        .right-sidebar .header-navbar .navbar-form {
            float: right !important;
        }
        
        .right-sidebar .navbar-nav {
            float: left !important;
            margin-right: 0;
            margin-left: -15px;
        }
        
        .right-sidebar .header-navbar .navbar-nav > li {
            float: right;
        }
        
        .right-sidebar .header-navbar .navbar-nav > li > a {
            border-left: none;
            border-right: 1px solid;
        }
    }/*End*/
    
/* ----- SIDEBAR TOGGLE ----- */
    .right-sidebar .sidebar-toggle .main {
        margin-right: 0;
    }
    
/* ----- CHAT/MESSENGER ----- */
    .right-sidebar .messenger-wrap {
        left: auto;
        right: -320px;
    }
    
    .right-sidebar .chat-box .messenger-wrap {
        left: auto;
        right: 0;
    }
    
    .right-sidebar .sidebar-content {
        -webkit-transition: left 0.3s ease;
        -moz-transition:    left 0.3s ease;
        -ms-transition:     left 0.3s ease;
        -o-transition:      left 0.3s ease;
        transition:         left 0.3s ease;
    }
    
    .right-sidebar .messenger-wrap {
        -webkit-transition: right 0.3s ease;
        -moz-transition:    right 0.3s ease;
        -ms-transition:     right 0.3s ease;
        -o-transition:      right 0.3s ease;
        transition:         right 0.3s ease;
    }
    
    /*Toggle*/
        .right-sidebar .chat-box .sidebar-content {
            left: -320px;
        }
    
    @media (max-width: 1170px) {
        .right-sidebar .main {
            margin-right: auto;
            left: auto;
            right: 0;
        }
        
        .right-sidebar .sidebar-toggle-sm .main {
            left: auto;
            right: 320px;
        }
    }/*End*/

/*******************************
7.0 - CHAT/MESSENGER
*******************************/
    .chat-wrap {
        position: relative;
    }

/* ----- FRIENDS LIST ----- */
    .friends-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    
    .friends-list > li {
        border-bottom: 1px solid;
    }
    
    .friends-list > li > a {
        display: block;
        padding: 14px 10px;
        border-left: 3px solid;
        text-decoration: none;
        font-weight: 400;
        font-size: 12px;
    }
    
    .friends-list figure {
        position: relative;
        top: -8px;
        float: left;
        width: 40px;
        margin-right: 10px;
    }
    
    .friends-list figure img {
        width: 100%;
    }
    
    .friends-list > li > a span {
        float: right;
    }

/* ----- MESSENGER CONTAINER ----- */
    .messenger-wrap {
        position: fixed;
        z-index: 10;
        top: 50px;
        left: -320px;
        width: 320px;
        height: 100%;
    }
    
    .sidebar-content,
    .messenger-wrap {
        -webkit-transition: left 0.3s ease;
        -moz-transition:    left 0.3s ease;
        -ms-transition:     left 0.3s ease;
        -o-transition:      left 0.3s ease;
        transition:         left 0.3s ease;
    }
        
    /*Toggle*/
        .chat-box .sidebar-content {
            left: 320px;
        }
    
        .chat-box .messenger-wrap {
            left: 0;
        }
        
/* ----- MESSENGER ----- */
    /*Header*/
        .messenger-header .toggle-list {
            display: block;
            float: right;
            padding: 24px 10px;
            text-align: center;
        }
        
        .friend-chat-profile {
            height: 70px;
            padding: 10px 35px 10px 10px;
            line-height: 45px;
            font-weight: 400;
            background-image: url('');
        }
        
        .friend-chat-profile figure {
            width: 50px;
            float: left;
            margin-right: 10px;
        }
        
        .friend-chat-profile figure img {
            width: 100%;
        }
        
        
    /*Content*/
        .messenger-content {
            position: relative;
            padding-bottom: 174px;
        }
        
        .messages {
            list-style: none;
            margin: 0;
            padding: 10px;
        }
        
        .messages > li {
            margin-bottom: 10px;
        }
        
        .messages > li:last-child {
            margin-bottom: 0;
        }
        
        .messages .profile-picture {
            width: 40px;
            height: 40px;
            margin: 0;
        }
        
        .messages .profile-picture img {
            border: none;
        }
        
        .friend-message .profile-picture {
            float: left;
        }
        
        .my-message .profile-picture {
            float: right;
        }
        
        .friend-message .message {
            margin-left: 50px;
        }
        
        .my-message .message {
            margin-right: 50px;
        }
        
        .messages .message {
            position: relative;
            min-height: 40px;
            padding: 10px;
            font-weight: 400;
            font-size: 12px;
            -webkit-border-radius: 5px;
            -moz-border-radius:    5px;
            border-radius:         5px;
        }
        
        .messages .message .time {
            margin-top: 4px;
            line-height: 10px;
            font-size: 10px;
            text-align: right;
        }
        
        .friend-message .message:before {
            content: "";
            position: absolute;
            top: 10px;
            left: -10px;
            width: 0; 
            height: 0; 
            border-top: 0 solid transparent;
            border-bottom: 10px solid transparent; 
            border-right:10px solid;
        }
        
        .my-message .message:before {
            content: "";
            position: absolute;
            top: 10px;
            right: -10px;
            width: 0; 
            height: 0; 
            border-top: 0 solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid;
        }
        
    /*Footer*/
        .messenger-footer {
            position: absolute;
            bottom: 50px;
            width: 100%;
        }
        
        .messenger-footer .row {
            margin: 0;
        }
        
        .messenger-footer .form-group {
            margin: 0 !important;
            padding: 0;
        }
        
    /*Addons*/
        .messenger-footer .form-group:first-child {
            text-align: center;
        }
        
        .messenger-footer .dropdown-toggle {
            display: block;
            margin-top: 16px;
        }
        
        .messenger-footer .dropdown-menu {
            left: -8px;
            min-width: 50px;
            width: 50px;
            margin-bottom: 5px;
            text-align: center;
        }
        
        .messenger-footer .dropdown-menu:after {
            content: "";
            position: absolute;
            left: 3px;
            bottom: -10px;
            width: 0; 
            height: 0; 
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid;
        }
        
    /*Message box*/
        .messenger-footer .form-control {
            overflow: hidden;
            resize: none;
            height: 54px;
            padding: 5px;
        }
        
/*******************************
8.0 - TASKS/TO-DO LIST
*******************************/
/* ----- FORM ----- */
    .tasks form {
        padding: 10px;
    }
    
    .tasks form .form-control {
        background: none;
    }

/* ----- TASKS LIST ----- */
    .tasks-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .task {
        position: relative;
        margin-bottom: 2px;
    }
    
    .check-task {
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        width: 35px;
        height: 32px;
        line-height: 32px;
        text-align: center;
    }
    
    .task.checked .check-task .fa {
        display: block;
        line-height: 32px;
    }
    
    .task-text {
        min-height: 32px;
        line-height: 32px;
        margin: 0 35px;
        padding: 0 10px;
    }
    
    .task.checked .task-text {
        text-decoration: line-through;
    }
    
    .task .delete-task {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .task .delete-task:hover {
        color: #e26a6a;
    }

/*******************************
9.0 - INBOX/SENT SIDEBAR
*******************************/    
/* ----- TABS ----- */
    .sidebar-emails-container .nav-tabs {
        background: none;
    }
    
    .sidebar-emails-container .nav-tabs > li {
        width: 50%;
        border-bottom: 1px solid;
    }

    .sidebar-emails-container .nav-tabs > li > a {
        text-align: center;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all 0.3s ease;
    }
    
    .sidebar-emails-container .nav-tabs > li > a:hover,
    .sidebar-emails-container .nav-tabs > li.active > a:hover,
    .sidebar-emails-container .nav-tabs > li.active > a:focus {
        background: none;
    }
    
    .sidebar-emails-container .nav-tabs > li.active > a {
        background: none;
    }

/* ----- EMAILS LIST ----- */
    .emails-list {
        margin: 0;
        padding: 0;
    }

    .emails-list > li {
        margin: 2px 0;
    }
    
    .emails-list > li:first-child {
        margin-top: 0;
    }
    
    .emails-list > li > a {
        position: relative;
        display: inline-block;
        width: 100%;
        padding: 15px 10px;
        text-decoration: none;
    }

    /*Short Emails*/
        .email-thumb {
            float: left;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            text-transform: uppercase;
            font-size: 18px;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
        }
        
        .email-thumb.image {
            line-height: normal;
        }
        
        .email-thumb img {
            width: 100%;
        }
        
        .email-short {
            margin: 8px 0 0 60px;
        }

        .email-short h6 {
            margin: 0;
            font-weight: 400;
            font-size: 14px;
        }
    
    /*When*/
        .emails-list .when {
            position: absolute;
            top: 0;
            right: 0;
            margin-right: 8px;
            font-weight: 400;
            font-size: 10px;
        }

/*******************************
10.0 - NOTIFICATIONS SIDEBAR
*******************************/
    .notifications {
        margin: 0;
        padding: 0;
    }
    
    .notifications > li {
        border-bottom: 1px solid;
    }
    
    .notifications a {
        display: inline-block;
        width: 100%;
        padding: 10px;
        text-decoration: none;
    }
    
    .notifications .icon {
        float: left;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        -webkit-border-radius: 25px;
        -moz-border-radius: 25px;
        border-radius: 25px;
    }
    
    .notification-details {
        margin: 8px 0 0 60px;
    }
    
    .notifications a h6 {
        margin: 0;
        font-weight: 400;
        font-size: 14px;
    }
    
    .notifications .when {
        font-weight: 400;
        font-size: 10px;
    }

/*******************************
11.0 - MAIN
*******************************/
    .main {
        position: relative;
        padding-top: 65px;
        padding-bottom: 50px;
    }
    
/* ----- CONTENT ----- */
    .dashboard {
        overflow: hidden;
    }
    
    .dashboard .container-fluid {
        padding: 10px 15px;
    }
    
/* ----- PAGE TITLE ----- */
    .page-title h1 {
        position: relative;
        margin: 0;
        padding: 6px 14px;
        font-size: 22px;
        line-height: 30px;
        text-transform: uppercase;
    }
    
    .page-title h1:after {
        bottom: -3px;
        content: "";
        height: 10px;
        left: 25px;
        margin-left: -1px;
        position: absolute;
        -webkit-transform: rotate(45deg);
        -moz-transform:    rotate(45deg);
        -ms-transform:     rotate(45deg);
        -o-transform:      rotate(45deg);
        width: 10px;
    }
    
    h1 small {
        font-weight: 300;
        text-transform: none;
    }
        
/* ----- CANCELS ----- */
    .no-margin-top {
        margin-top: 0 !important;
    }
    
    .no-margin-bottom {
        margin-bottom: 0 !important;
    }        
    
/*******************************
12.0 - GRID
*******************************/
    .col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
    .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
    .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
    .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
    .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
    .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
    .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
    .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
    .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
    .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
    .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
    .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .container-fluid {
        padding-top: 20px;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    .center-col {
        float: none;
        margin: 0 auto;
    }
    
    @media (max-width: 767px) {
        .container-fluid {
            padding-top: 20px;
            padding-left: 10px;
            padding-right: 10px;
        }
    }
    
/*******************************
13.0 - PANES
*******************************/
    .pane {
        margin-bottom: 20px;
        padding: 15px;
    }
    
    .container-fluid.white .pane {
        border: none;
    }
    
    @media (max-width: 767px) {
        .pane {
            margin-bottom: 10px;
        }
    }
    
    .pane + .pane {
        margin-top: 30px;
    }
        
/* ----- PANE TITLES ----- */
    .pane h2 {
        position: relative;
        margin: 0 0 20px;
        height: 30px;
        border-bottom: 1px solid;
        font-weight: 300;
        font-size: 20px;
    }
    
    .pane h2 span {
        display: inline-table;
        height: 30px;
        border-bottom: 1px solid;
    }
    
    .pane h3 {
        margin: 30px 0 20px;
        padding: 0 0 10px;
        border-bottom: 1px solid;
        font-weight: 300;
        font-size: 18px;
    }
        
        .pane p:last-child {
            margin-bottom: 0;
        }
        
        
    .widget .scrollpane-container {
        position: absolute;
        width: 100%;
        height: 100%;
        padding: 8px;
    }
    
    .scrollpane {
        width: 100%;
        height: 100%;
        overflow: auto;
        outline: none;
    }
    
    .scrollpane .jspPane {
        position: absolute;
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    .scrollpane .jspVerticalBar {
        position: absolute;
        top: 0;
        right: 3px;
        width: 4px;
        height: 100%;
        background-color: #fafafa;
    }
    
    .scrollpane .jspContainer {
        width: 100% !important;
        overflow: hidden;
        position: relative;
    }
    
    .scrollpane .scroll-pane {
        width: 100% !important;
        height: 100%;
    }
    
    .scrollpane .jspTrack {
        position: relative;
    }
    
    .scrollpane .jspDrag {
        position: relative;
        top: 0;
        left: 0;
        cursor: pointer;
        -moz-opacity: 0.30;
        -khtml-opacity: 0.30;
        opacity: 0.30;
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=30;);
        filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30);
        filter:alpha(opacity=30);
        background-color: #bbb;
    }

/*******************************
14.0 - FOOTER
*******************************/
    #footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-weight: 400;
        font-size: 12px;
    }

/*******************************
15.0 - DRAG & DROP
*******************************/
    .drag-drop {
        margin: 0 -10px;
    }
    
    .grid-stack {
        position: relative;
    }

    .grid-stack-item {
        position: absolute;
        padding: 0;
    }

    .grid-stack-item .grid-stack-item-content,
    .grid-stack-item .placeholder-content {
        margin: 0;
        position: absolute;
        top: 0;
        left: 5px;
        right: 5px;
        bottom: 0;
        width: auto;
        z-index: 0 !important;
        overflow: hidden;
    }

    .grid-stack-placeholder .placeholder-content {
        border: 1px dashed lightgray;
    }

    .grid-stack-item.ui-draggable-dragging,
    .grid-stack-item.ui-resizable-resizing {
        z-index: 100;
    }

    .grid-stack-item.ui-draggable-dragging .grid-stack-item-content,
    .grid-stack-item.ui-resizable-resizing .grid-stack-item-content {
        box-shadow: 1px 4px 6px rgba(0, 0, 0, 0.2);
        opacity: 0.8;
    }

    .grid-stack-item .ui-resizable-handle {
        padding: 3px;
        margin: 3px 0;
        cursor: nwse-resize;
    
        position: absolute;
        bottom: 0;
        right: 15px;
    
        font: normal normal normal 14px/1 FontAwesome;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
    
        font-size: 10px;
    }
    
    .grid-stack-item.white-handle .ui-resizable-handle {
        color: #fff !important;
    }

    .grid-stack-item .ui-resizable-handle::before {
        content: "\f065";
    }

/* ----- COLUMNS ----- */
    /*2 Columns*/
    .cols-2 .grid-stack-item[data-gs-width="2"]  {min-width: 50%; width: 100%;}
    .cols-2 .grid-stack-item[data-gs-width="1"]  {min-width: 50%;}
    
    .cols-2 .grid-stack-item[data-gs-x="1"]  {left: 50%;}
    
    /*3 Columns*/
    .cols-3 .grid-stack-item[data-gs-width="3"]  {min-width: 33.33333333%; width: 100%;}
    .cols-3 .grid-stack-item[data-gs-width="2"]  {min-width: 33.33333333%; width: 66.66666667%;}
    .cols-3 .grid-stack-item[data-gs-width="1"]  {min-width: 33.33333333%;}
    
    .cols-3 .grid-stack-item[data-gs-x="2"]  {left: 66.66666667%;}
    .cols-3 .grid-stack-item[data-gs-x="1"]  {left: 33.33333333%;}
    
    /*4 Columns*/
    .cols-4 .grid-stack-item[data-gs-width="4"]  {min-width: 25%; width: 100%;}
    .cols-4 .grid-stack-item[data-gs-width="3"]  {min-width: 25%; width: 75%;}
    .cols-4 .grid-stack-item[data-gs-width="2"]  {min-width: 25%; width: 50%;}
    .cols-4 .grid-stack-item[data-gs-width="1"]  {min-width: 25%;}
    
    .cols-4 .grid-stack-item[data-gs-x="3"]  {left: 75%;}
    .cols-4 .grid-stack-item[data-gs-x="2"]  {left: 50%;}
    .cols-4 .grid-stack-item[data-gs-x="1"]  {left: 25%;}
    
    /*5 Columns*/
    .cols-5 .grid-stack-item[data-gs-width="5"]  {min-width: 20%; width: 100%;}
    .cols-5 .grid-stack-item[data-gs-width="4"]  {min-width: 20%; width: 80%;}
    .cols-5 .grid-stack-item[data-gs-width="3"]  {min-width: 20%; width: 60%;}
    .cols-5 .grid-stack-item[data-gs-width="2"]  {min-width: 20%; width: 40%;}
    .cols-5 .grid-stack-item[data-gs-width="1"]  {min-width: 20%;}
    
    .cols-5 .grid-stack-item[data-gs-x="4"]  {left: 80%;}
    .cols-5 .grid-stack-item[data-gs-x="3"]  {left: 60%;}
    .cols-5 .grid-stack-item[data-gs-x="2"]  {left: 40%;}
    .cols-5 .grid-stack-item[data-gs-x="1"]  {left: 20%;}
    
    /*6 Columns*/
    .cols-6 .grid-stack-item[data-gs-width="6"]  {min-width: 16.66666666666667%; width: 100%;}
    .cols-6 .grid-stack-item[data-gs-width="5"]  {min-width: 16.66666666666667%; width: 83.33333333333333%;}
    .cols-6 .grid-stack-item[data-gs-width="4"]  {min-width: 16.66666666666667%; width: 66.66666666666667%;}
    .cols-6 .grid-stack-item[data-gs-width="3"]  {min-width: 16.66666666666667%; width: 50%;}
    .cols-6 .grid-stack-item[data-gs-width="2"]  {min-width: 16.66666666666667%; width: 33.33333333333333%;}
    .cols-6 .grid-stack-item[data-gs-width="1"]  {min-width: 16.66666666666667%;}
    
    .cols-6 .grid-stack-item[data-gs-x="5"]  {left: 83.33333333333333%;}
    .cols-6 .grid-stack-item[data-gs-x="4"]  {left: 66.66666666666667%;}
    .cols-6 .grid-stack-item[data-gs-x="3"]  {left: 50%;}
    .cols-6 .grid-stack-item[data-gs-x="2"]  {left: 33.33333333333333%;}
    .cols-6 .grid-stack-item[data-gs-x="1"]  {left: 16.66666666666667%;}

    @media (max-width: 768px) {
        .grid-stack-item {
            position: relative !important;
            width: auto !important;
            left: 0 !important;
            top: auto !important;
            margin-bottom: 20px;
        }
        
        .grid-stack-item:last-child {
            margin-bottom: 0;
        }
    
        .grid-stack-item .ui-resizable-handle {
            display: none;
        }
    
        .grid-stack {
            height: auto !important;
        }
    }

    .grid-stack.grid-stack-animate, .grid-stack.grid-stack-animate .grid-stack-item {
        -webkit-transition: left .3s, top .3s, height .3s, width .3s;
        -moz-transition: left .3s, top .3s, height .3s, width .3s;
        -o-transition: left .3s, top .3s, height .3s, width .3s;
        -ms-transition: left .3s, top .3s, height .3s, width .3s;
        transition: left .3s, top .3s, height .3s, width .3s;
    }
    /*Don't animate the placeholder or when dragging/resizing*/
    .grid-stack.grid-stack-animate .grid-stack-item.ui-draggable-dragging,
    .grid-stack.grid-stack-animate .grid-stack-item.ui-resizable-resizing,
    .grid-stack.grid-stack-animate .grid-stack-item.grid-stack-placeholder{
        -webkit-transition: left .0s, top .0s, height .0s, width .0s;
        -moz-transition: left .0s, top .0s, height .0s, width .0s;
        -o-transition: left .0s, top .0s, height .0s, width .0s;
        transition:  left .0s, top .0s, height .0s, width .0s;
    }

/*******************************
16.0 - DASHBOARD WIDGETS
*******************************/
    .widget {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    
    .widget-header {
        padding: 15px 15px 0;
    }
    
    .widget-content {
        padding: 8px;
    }
    
    .widget h2 {
        position: relative;
        margin: 0;
        height: 30px;
        border-bottom: 1px solid #eee;
        font-weight: 300;
        font-size: 20px;
    }
    
    .widget h2 span {
        display: inline-table;
        height: 30px;
        border-bottom: 1px solid;
    }
    
    .widget .drag {
        display: none;
        cursor: move;
        z-index: 999;
        position: absolute;
        top: 0;
        right: 0;
        padding: 10px;
        background-color: #f4f4f4;
        color: #ddd;
    }
    
    .widget:hover .drag {
        display: block;
    }
    
    .widget .drag:before {
        content: "\f047";
    }
    
    .widget .drag:hover {
        background-color: #eee;
        color: #999;
    }
    
    @media (max-width: 767px) {
        .widget:hover .drag {
            display: none;
        }
    }/*END*/
    
/* ----- SCROLLPANE ----- */
    .widget.scroll-panel .widget-content {
        padding: 0;
    }
        
/* ----- TODAY'S SALES ----- */
    .widget-sales {
        background-color: #ABB7B7;
    }
    
    .widget-sales h2 {
        border-bottom-color: #a3afaf;
        color: #fff;
    }
    
    .widget-sales h2 span {
        border-bottom-color: #fff !important;
    }
    
    .widget-sales .flot-chart {
        margin: 0;
    }
    
    .widget-sales .flot-chart .line {
        height: 395px;
    }
    
    .widget-sales .flot-chart .flot-text {
        color: #fff !important;
        font-weight: 400;
    }
        
/* ----- MINI STATISTICS ----- */
    .widget-mini-stat {
        background-repeat: no-repeat;
        background-size: cover;
    }
    
    .widget-mini-stat.new-orders {
        background-image: url('../img/core/new-order.jpg');
    }
    
    .widget-mini-stat.revenue {
        background-image: url('../img/core/revenue.jpg');
    }
    
    .widget-mini-stat.in-cart {
        background: #F4D03F
    }
    
    .widget-mini-stat.cancelled {
        background: #D24D57
    }
    
    .widget-mini-stat .widget-content {
        padding: 0;
    }
    
/*Text*/
    .widget-mini-stat .mini-details {
        position: absolute;
        width: 100%;
        padding: 10px;
    }
    
    .widget-mini-stat.normal .mini-details .mini-title,
    .widget-mini-stat.normal .mini-details .mini-count {
        text-shadow: none;
        color: #fff;
    }
    
    .widget-mini-stat .mini-details .mini-title,
    .widget-mini-stat .mini-details .mini-count {
        cursor: default;
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
        color: #000;
    }
    
    .widget-mini-stat .mini-details .mini-title {
        display: block;
        margin-bottom: 5px;
        font-weight: 400;
        font-size: 1.1em;
    }
    
    .widget-mini-stat .mini-details .mini-count {
        font-size: 3em;
    }
    
/*Chart*/
    .widget-mini-stat .flot-chart {
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    .widget-mini-stat .flot-chart .line {
        height: 160px;
    }
    
    .widget-mini-stat .flot-chart .flot-text {
        display: none;
    }
    
/* ----- SOCIAL CAROUSEL ----- */
    .widget-social-carousel .widget-content {
        padding: 5px;
    }
    
    .social-stats .owl-controls {
        position: absolute;
        z-index: 100;
        bottom: 0;
        left: 0;
        margin: 0 !important;
        -moz-opacity: 0.40;
        -khtml-opacity: 0.40;
        opacity: 0.40;
    }
    
    .social-stats .owl-controls .owl-nav [class*=owl-] {
        margin: 0 !important;
        background-color: #fff !important;
    }
    
    .social-stats .owl-carousel .owl-item {
        background: none;
        -webkit-backface-visibility: visible;
    }
    
    .social-stats .social {
        overflow: hidden;
        position: relative;
        min-height: 100px;
        -moz-opacity: 0.90;
        -khtml-opacity: 0.90;
        opacity: 0.90;
        -webkit-backface-visibility: hidden;
    }
    
    .social-stats .social:hover {
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    
    .social-stats .social-title {
        position: absolute;
        z-index: 2;
        top: 30px;
        left: 12px;
        font-size: 18px;
        color: #fff;
    }
    
    .social-stats .social-count {
        position: absolute;
        z-index: 2;
        bottom: 0;
        left: 0;
        margin: 0 0 10px 10px;
        font-size: 3em;
        color: #fff;
    }
    
    .social-stats .social-count small {
        font-size: 14px;
    }
    
    .social-stats .social .social-icon {
        position: absolute;
        z-index: 1;
        right: -2px;
        top: -10px;
        font-size: 10em;
        color: #fff;
        -moz-opacity: 0.20;
        -khtml-opacity: 0.20;
        opacity: 0.20;
        -ms-transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
        transform: rotate(30deg);
        -webkit-transition: opacity 0.3s linear, transform 0.3s ease-out;
           -moz-transition: opacity 0.3s linear, transform 0.3s ease-out;
             -o-transition: opacity 0.3s linear, transform 0.3s ease-out;
                transition: opacity 0.3s linear, transform 0.3s ease-out;
    }
    
    .social-stats .social:hover .social-icon {
        -moz-opacity: 0.60;
        -khtml-opacity: 0.60;
        opacity: 0.60;
        -ms-transform: rotate(25deg);
        -webkit-transform: rotate(25deg);
        transform: rotate(25deg);
    }
    
    .social.twitter {background-color: #63cdf1;}
    .social.facebook {background-color: #507cbe;}
    .social.youtube {background-color: #f16261;}
    .social.google-plus {background-color: #DB5952;}
    .social.linkedin {background-color: #0274B3;}
    .social.dribbble {background-color: #F26798;}
    
/* ----- WEBSITE STATISTICS ----- */
    .widget-website-stats .widget-content {
        padding: 0;
    }
    
    .widget-website-stats ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }
    
    .widget-website-stats ul li {
        padding: 15px 10px;
        border-bottom: 1px solid #f6f6f6;
        font-weight: 400;
        color: #999;
    }
    
    .widget-website-stats ul li span {
        font-weight: 600;
        color: #666;
    }
    
    .widget-website-stats ul li:hover {
        background-color: #fcfcfc;
    }
    
    .widget-website-stats .flot-chart {

    }
    
    .widget-website-stats .flot-chart .flot {
        position: absolute;
        bottom: 0;
        height: 145px;
    }
    
/* ----- SERVER STATUS ----- */
    .widget-server-status {
        background-color: #D2D7D3;
    }
    
    .widget-server-status .widget-content {
        padding: 0;
    }
    
    .widget-server-status .title {
        display: block;
        margin-top: 5px;
        text-align: center;
        font-size: 20px;
        color: #939b94;
    }
    
    .widget-server-status .flot-chart {
        width: 108%;
        margin-left: -8px;
    }

    .widget-server-status .flot-chart .real {
        height: 335px;
    }
    
    .widget-server-status .flot-chart .flot-text {
        display: none;
    }
    
/* ----- SOCIAL STATISTICS ----- */
    .widget-social-stats .flot-chart .pie {
        height: 275px;
    }

/*******************************
17.0 - PAGE - MEMBERSHIP
*******************************/
    .page-membership {
        background-image: url('');
    }
    
    .member-container {
        margin: 10% 0;
    }
    
    .app-logo {
        margin-bottom: 30px;
        text-align: center;
    }
    
    .member-container-inside {
        position: relative;
        width: 320px;
        margin: 0 auto;
        padding: 15px;
        background-color: #fff;
    }
    
    .member-container-inside .form-group + .form-group {
        margin-top: 15px;
    }
    
    .member-container p {
        margin-top: 15px;
        text-align: center;
    }
    
/* ----- RESPONSIVE ----- */
    @media (max-width: 767px) {
        .member-container {
            margin: 15px 0 0;
            padding: 10px;
        }
        
        .member-container-inside {
            width: 100%;
        }
    }/*END*/

/*******************************
18.0 - LOGGING OUT PAGE
*******************************/
    .logging-out {
        background-image: url('');
    }
    
    .logging-out-container {
        position: absolute;
        width: 250px;
        height: 40px;
        line-height: 35px;
        top: 50%;
        margin-top: -20px;
        left: 50%;
        margin-left: -125px;
        text-align: center;
        font-size: 30px;
        color: #fff;
    }

    .logging-out-container.hidden {
        display: none;
    }

/*******************************
19.0 - PAGE - PROFILE
*******************************/
    .profile-page {
        background-color: #fff;
    }
    
    .left-side {
        width: 320px;
        float: left;
    }
    
    .right-side {
        margin-left: 320px;
    }

/* ----- COVER/PROFILE PICTURE ----- */
    .profile-page-header {
        position: relative;
    }
    
    .profile-picture-lg img {
        width: 100%;
    }
    
    .profile-cover {
        height: 320px;
        background-image: url('../../assets/img/uploads/cover.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
    
/* ----- PROFILE DETAILS ----- */
    .profile-details-container {
        position: relative;
        padding: 15px;
    }
    
    .profile-details-container h2 {
        margin: 0;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 24px;
    }
    
    /*Details*/
        .profile-details-container .detail .fa {
            margin-right: 5px;
            font-size: 14px;
        }
        
        .profile-details-container .detail {
            display: block;
            padding: 10px 0;
            border-bottom: 1px solid;
            font-weight: 400;
            font-size: 12px;
        }
        
        .profile-details-container .detail.last {
            border-bottom: none;
        }
    
    /*Social*/
        .profile-social {
            margin-top: 10px;
        }
        
        .profile-social a {
            display: inline-block;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

/* ----- TIMELINE ----- */
    .timeline {
        position: relative;
        padding: 40px;
    }
    
    .timeline:before {
        content: "";
        position: absolute;
        top: 40px;
        left: 50%; margin-left: -1px;
        width: 2px;
        height: 100%;
    }
    
    /*Write Post*/
        .timeline-write-post {
            position: relative;
            z-index: 10;
            width: 70%;
            min-height: 100px;
            margin: 0 auto 40px auto;
        }
        
        .timeline-write-post .textbox {
            margin-bottom: 0;
            padding: 10px;
        }
        
        .write-post-footer {
            padding: 4px;
        }
    
    /*Posts*/
        .timeline-post {
            position: relative;
            width: 50%;
            float: left;
            margin-bottom: 50px;
            padding-right: 40px;
        }
        
        .timeline-post.right {
            float: right;
            padding-left: 40px;
        }
        
        .timeline-post.second.right {
            margin-top: 70px;
        }
        
    /*Post Icon*/
        .timeline-post-icon {
            position: absolute;
            top: 25px;
            right: -25px;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            -webkit-border-radius: 25px;
            -moz-border-radius: 25px;
            border-radius: 25px;
        }
        
        .right .timeline-post-icon {
            right: auto;
            left: -25px;
        }
    
    /*Post Content*/
        .timeline-post-content {
            position: relative;
            width: 100%;
            min-height: 100px;
            float: left;
        }
        
        .right .timeline-post-content {
            float: right;
        }
        
        .timeline-post-content:after {
            content: "";
            position: absolute;
            top: 40px;
            right: -10px;
            width: 0; 
            height: 0; 
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid;
        }
        
        .right .timeline-post-content:after {
            right: auto;
            left: -10px;
            border-left: none;
            border-right: 10px solid;
        }

        .timeline-post-content-inner {
            padding: 15px;
        }
        
    /*Post Footer*/
        .timeline-post-content-footer {
            height: 30px;
        }
        
        .timeline-post-content-footer a {
            padding: 4px 8px;
            text-decoration: none;
            display: inline-block;
        }
        
        .timeline-post-content-footer .when {
            float: right;
            padding: 4px 8px;
            font-weight: 400;
            font-size: 12px;
        }
        
    
        .timeline-map {
            height: 300px;
        }
        
        .timeline-link:hover {
            text-decoration: none;
        }
        
        .timeline-link h6 {
            margin: 0 0 10px;
            font-weight: 400;
            font-size: 18px;
        }

        .timeline-post-content-inner p:last-child {
            margin-bottom: 0;
        }
        
        .timeline-post-content-inner figure {
            margin-bottom: 15px;
        }
        
        .timeline-post-content-inner figure img {
            width: 100%;
        }

/* ----- RESPONSIVE ----- */
    @media (max-width: 767px) {
    /* ----- PROFILE HEADER ----- */
        .profile-picture-lg {
            position: absolute;
            left: 15px;
            bottom: -75px;
            float: none;
            width: 150px;
        }
        
        .profile-cover {
            margin: 0;  
        }
        
    /* ----- PROFILE CONTENT ----- */
        .profile-details-container {
            float: none;
            width: 100%;
            padding: 95px 15px 15px;
        }
        
        .profile-social {
            position: absolute;
            top: 20px;
            left: 180px;
            margin: 0;
        }
        
        .profile-timeline-container {
            margin: 0;
        }
    }/*END*/
    
    @media (min-width: 768px) and (max-width: 991px){
        .left-side {
            width: 210px;
        }
        
        .right-side {
            margin-left: 210px;
        }
        
        .profile-cover {
            height: 210px;
        }
    }/*END*/
    
    @media (max-width: 992px) {
        /* ----- PROFILE TIMELINE ----- */
        .timeline {
            padding: 10px;
        }
        
        .timeline-write-post {
            width: 100%;
        }
        
        .timeline-post,
        .timeline-post.right {
            float: none !important;
            width: 100%;
            margin-bottom: 30px;
            padding: 55px 0 0;
            
        }
        
        .timeline-post.second.right {
            margin-top: 0;
        }
        
        .timeline-post-icon {
            left: 50% !important;
            margin-left: -20px;
            top: 0;
            width: 40px;
            height: 40px;
            line-height: 40px;
        }
        
        .timeline-post-content {
            float: none !important;
        }
        
        .timeline-post-content:after {
            display: none;
        }
        
        .timeline-post-content:before {
            content: "";
            position: absolute;
            top: -10px;
            left: 50%;
            margin-left: -10px;
            width: 0; 
            height: 0; 
            border-right: 10px solid transparent;
            border-left: 10px solid transparent;
            border-bottom: 10px solid;
        }
    }/*END*/

    @media (max-width: 480px) {
        .profile-social {
            position: relative;
            top: auto;
            left: auto;
            margin-top: 5px;
        }
    }/*END*/





/*******************************
20.0 - THEME OPTIONS
*******************************/
    .theme-options {
        z-index: 98;
        top: 100px;
        right: -200px;
        width: 200px;
        padding: 10px;
        background: #fff;

        -moz-opacity: 0.30;
        -khtml-opacity: 3.50;
        opacity: 0.30;
        
        -webkit-transition: opacity 0.3s ease, right 0.3s ease;
        -moz-transition: opacity 0.3s ease, right 0.3s ease;
        -ms-transition: opacity 0.3s ease, right 0.3s ease;
        -o-transition: opacity 0.3s ease, right 0.3s ease;
        transition: opacity 0.3s ease, right 0.3s ease;
    }
    
    .toggle-theme-options .theme-options {
        right: 0;
        
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
        
        -webkit-box-shadow: -3px 0px 10px 0px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    -3px 0px 10px 0px rgba(50, 50, 50, 0.5);
        box-shadow:         -3px 0px 10px 0px rgba(50, 50, 50, 0.5);
    }
    
    .theme-options h5 {
        margin: 0 0 0 ; 
        padding: 5px;
        text-transform: uppercase;
        font-weight: 400;
        font-size: 14px;
        text-align: center;
    }
    
    .theme-options .divider {
        height: 1px;
        margin: 15px 0 5px;
        background-color: #f6f6f6;
    }

/* ----- THEME OPTIONS SWITCH ----- */
    .button-switch.style {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: -40px;
        width: 40px;
        height: 40px;
        line-height: 50px;
        text-align: center;
        background-color: #000;
        color: #fff;
    }
    
/* ----- SIDEBAR SWITCHER ----- */
    .theme-option-toggle-sidebar {
        cursor: pointer;
        display: block;
        margin: 0 auto;
        width: 100px;
        height: 75px;
        text-indent: -999999px;
    }
    
    .theme-option-toggle-sidebar {
        background-image: url('../img/core/sidebar-switcher-icon.png');
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100px;
    }
    
    .right-sidebar .theme-option-toggle-sidebar {
        background-position: center bottom;
    }

/* ----- THEME SWITCHER ----- */
    .theme-switcher {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    .theme-switcher > li {
        float: left;
        width: 33.33333333333333%;
        padding: 5px;
    }
    
    .theme-switcher > li.main-theme {
        width: 100%;
    }

    .theme-switcher > li > a {
        display: block;
        height: 20px;
        text-decoration: none;
        background-color: #eee;
        border-right: 25px solid;
        border-color: #eee;
        padding-left: 5px;
        font-weight: 400;
        font-size: 12px;
        color: #fff;
    }
    
    .theme-switcher > li.main-theme > a {
        border-right: 85px solid;
    }

/*Themes*/
    .theme-switcher > li.default-theme > a {
        background-color: #22262e;
        border-color: #16a085;
    }
    
    .theme-switcher > li.dark-theme > a {
        background-color: #22262e;
        border-color: #292d37;
    }

    .theme-switcher > li.red-theme > a {
        background-color: #553537;
        border-color: #8E484B;
    }
    
    .theme-switcher > li.yellow-theme > a {
        background-color: #91914a;
        border-color: #C1C142;
    }

    .theme-switcher > li.green-theme > a {
        background-color: #6D8644;
        border-color: #85B23D;
    }
    
    .theme-switcher > li.blue-theme > a {
        background-color: #2D5658;
        border-color: #1D8E93;
    }

    .theme-switcher > li.purple-theme > a {
        background-color: #4E3461;
        border-color: #F4EF2F;
    }
    
    .theme-switcher > li.pink-theme > a {
        background-color: #5E305E;
        border-color: #A5BA40;
    }
    
    .theme-switcher > li.orange-theme > a {
        background-color: #91674A;
        border-color: #07CEB3;
    }


 

/* ----- DEMO - Used for demo elements only, can be deleted. ----- */
    .demo .progress:last-child {
        margin-bottom: 0;
    }
    
    .demo-center-progress {
        width: 230px;
        height: 300px;
        margin: 0 auto;
    }
    
    .demo-center-progress .progress.vertical {
        margin-bottom: 0;
    }
    
    .demo-center-progress .progress.vertical:last-child {
        margin-right: 0;
    }
    
    .demo .sparkline {
        margin: 0 auto;
            width: 220px;
            background: #f9f9f9;
            padding: 10px;
            text-align: center;
    }
    
    
    .icon-demo .fa,
    .icon-demo .glyphicon {
        width: 16.66666666666667%;
        margin-right: -4px;
        padding: 20px 0;
        text-align: center;
        color: #444;
    }
    
    .icon-demo .glyphicon {
        font-size: 3em;
    }
    
    @media (max-width: 480px) {
        .icon-demo .fa,
        .icon-demo .glyphicon {
            font-size: 1.33333333em;
        }
    }
    
    .owl-carousel.demo .owl-item {
        padding: 70px 30px;
        text-align: center;
    }
    
    .owl-carousel.demo .owl-item h4 {
        margin-bottom: 0;
    }